<template>
    <div id="container">
        <div class="left-chart aside-chart">
            <chart-list :chartList="leftList"> </chart-list>
            <!-- <chart-list/> chartList.vue组件，:chartList 向子组件chartList.vue 传递 chartList 变量值 -->
        </div>

        <div class="right-chart aside-chart">
            <chart-list :chartList="rightList"> </chart-list>
        </div>
        <img src="../assets/image/mainView/title.png" alt="" class="top-img" />
        <div class="date">{{ date }}</div>
        <div class="change-button">
            <div class="change-item" :class="[index == 1 ? 'isActive' : '']" @click="changeList(1)">
                <span>门诊/住院</span>
            </div>
            <div class="change-item" :class="[index == 2 ? 'isActive' : '']" @click="changeList(2)">
                <span>收入详情</span>
            </div>
            <div class="change-item" :class="[index == 0 ? 'isActive' : '']" @click="changeList(3)">
                <span>药品详情</span>
            </div>
        </div>
        <div class="title-one">医共体信息大屏</div>
        <ygt-container class="ygt-container"></ygt-container>
        <bottom-table class="middle-bottom-chart"></bottom-table>
        <div class="copyright">

        </div>
    </div>
</template>
<script>
import chartList from "../components/chartList.vue";
import AMapLoader from "@amap/amap-jsapi-loader";
import { SCHEDULED_SCROLLING_TASK } from "../commonJs/config";
import bottomTable from "../components/bottomTable.vue";
import ygtContainer from "../components/ygtContainer.vue";
export default {
    name: "views",
    components: {
        chartList,
        bottomTable,
        ygtContainer,
    },
    data() {
        return {
            map: null, //地图实例
            date: new Date(),
            leftList: [
                {
                    name: "门诊总人数/占比",
                    enName: "Total number/proportion of outpatients",
                    url: "total",
                    height: "30%",
                },
                {
                    name: "中医药门急诊占比",
                    enName: "Outpatient proportion",
                    url: "outpatient",
                    height: "34%",
                },
                {
                    name: "慢病患者管理率",
                    enName: "Management rate of patients",
                    url: "management",
                    height: "36%",
                },
            ],
            rightList: [
                {
                    name: "住院总人次/占比",
                    enName: "Total number of inpatients/proportion",
                    url: "inpatients",
                    height: "31%",
                },
                {
                    name: "出入院运行指标",
                    enName: "Operation index of hospital entrance and exit",
                    url: "operationIndex",
                    height: "38%",
                },
                {
                    name: "总床位数",
                    enName: "Total number of beds",
                    url: "overview",
                    height: "31%",
                },
            ],
            index: 1,
            timer1: null,
            timer2: null,
        };
    },
    /* eslint-disable */
    created() {
        this.initMap();
        this.dateFormat();
        this.timer1 = setInterval(() => {
            // this.index = 3;
            this.index++; //定时改变index值
            //SCHEDULED_SCROLLING_TASK * 1000
            this.changeList();
        }, SCHEDULED_SCROLLING_TASK * 1000);

        this.timer2 = setInterval(() => {
            this.dateFormat();
        }, 1000);
    },

    beforeDestroy() {
        if (this.timer1) {
            clearInterval(this.timer1);
        }
        if (this.timer2) {
            clearInterval(this.timer2);
        }
    },

    methods: {
        //初始化时间
        dateFormat() {
            let date = new Date();
            let year = date.getFullYear();
            let month =
                date.getMonth() + 1 < 10
                    ? "0" + (date.getMonth() + 1)
                    : date.getMonth() + 1;
            let day =
                date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
            let hours =
                date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
            let minutes =
                date.getMinutes() < 10
                    ? "0" + date.getMinutes()
                    : date.getMinutes();
            let seconds =
                date.getSeconds() < 10
                    ? "0" + date.getSeconds()
                    : date.getSeconds();
            this.date =
                year +
                "-" +
                month +
                "-" +
                day +
                " " +
                hours +
                ":" +
                minutes +
                ":" +
                seconds;
        },
        //初始化地图
        initMap() {
            AMapLoader.load({
                key: "602016d9a79837a263d200af109445bf	", // 申请好的Web端开发者Key，首次调用 load 时必填
                version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                plugins: [""], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
                Loca: {
                    version: "2.0.0",
                },
            })
                .then((AMap) => {
                    // window.AMap = AMap;
                    this.map = new AMap.Map("container", {
                        //设置地图容器id
                        viewMode: "3D", //是否为3D地图模式
                        zoom: 4.4, //初始化地图级别
                        center: ["103.0160531", "28.1551337"], //初始化地图中心点位置
                        //   center: [116.597005,39.914388],
                        mapStyle: "amap://styles/grey", //地图风格
                        // mapStyle:
                        //     "amap://styles/0527458982faa051cc0bd48055544ba8",
                        pitch: 40,
                        showLabel: false,
                    });
                })
                .catch((e) => {
                    console.log(e);
                });
        },

        //当切换大屏时，变换两侧图表
        changeList(item) {
            this.index = item ? item : this.index;
            switch (this.index) {
                case 1:
                    this.leftList = [
                        {
                            name: "门诊总人数/占比",
                            enName: "Total number/proportion of outpatients",
                            url: "total",
                            height: "30%",
                        },
                        {
                            name: "中医药门急诊占比",
                            enName: "Outpatient proportion",
                            url: "outpatient",
                            height: "34%",
                        },
                        {
                            name: "慢病患者管理率",
                            enName: "Management rate of patients",
                            url: "management",
                            height: "36%",
                        },
                    ];
                    this.rightList = [
                        {
                            name: "住院总人次/占比",
                            enName: "Total number of inpatients/proportion",
                            url: "inpatients",
                            height: "31%",
                        },
                        {
                            name: "出入院运行指标",
                            enName: "Operation index of hospital entrance and exit",
                            url: "operationIndex",
                            height: "38%",
                        },
                        {
                            name: "总床位数",
                            enName: "Total number of beds",
                            url: "overview",
                            height: "31%",
                        },
                    ];
                    break;
                case 2:
                    this.leftList = [
                        {
                            name: "医院总收入/收入占比",
                            enName: "Hospital income/percentage",
                            url: "totalIncome",
                            height: "30%",
                        },
                        {
                            name: "县域医保基金占比",
                            enName: "Proportion of medical insurance fund",
                            url: "medicalInsurance",
                            height: "33%",
                        },
                        {
                            name: "药品/耗材收入占比",
                            enName: "Proportion of drug/consumable income",
                            url: "drugs",
                            height: "37%",
                        },
                    ];
                    this.rightList = [
                        {
                            name: "门诊收入",
                            enName: "Outpatient revenue",
                            url: "outpatientRevenue",
                            height: "26%",
                        },
                        {
                            name: "门诊人均费用/住院治疗收入",
                            enName: "Per capita outpatient cost",
                            url: "outpatientCost",
                            height: "39%",
                        },
                        {
                            name: "住院人均费用/手术收入占比",
                            enName: "Percentage of average hospitalization expense/operation income",
                            url: "operationIncome",
                            height: "35%",
                        },
                    ];
                    break;
                case 3:
                    this.leftList = [
                        {
                            name: "药品消耗总数TOP10",
                            enName: "Top 10 drug consumption",
                            url: "topTenDrug",
                            height: "33%",
                        },
                        {
                            name: "基本药物总数/使用占比",
                            enName: "Total/proportion of essential drugs",
                            url: "essentialDrugs",
                            height: "32%",
                        },
                        {
                            name: "两病用药",
                            enName: "Medication for two diseases",
                            url: "twoDiseases",
                            height: "35%",
                        },
                    ];
                    this.rightList = [
                        {
                            name: "抗菌药总数",
                            enName: "Total number of antibacterial drugs",
                            url: "antibacterial",
                            height: "26%",
                        },
                        {
                            name: "抗菌药使用率",
                            enName: "Antibacterial usage rate",
                            url: "usageRate",
                            height: "37%",
                        },
                        {
                            name: "抗肿瘤药物使用率",
                            enName: "Utilization rate of anti-tumor drugs",
                            url: "antiTumor",
                            height: "37%",
                        },
                    ];
                    break;
            }
            if (this.index == 3) {
                this.index = 0;
            }
        },
    },
};
</script>
<style lang="scss">
#container {
    height: 100%;
    position: relative;

    .aside-chart {
        width: 530px;
        height: calc(100% - 70px);
        position: absolute;
        top: 70px;
        z-index: 99;

        &.left-chart {
            left: 0;
            padding-left: 15px;
        }

        &.right-chart {
            left: 1390px;
            padding-right: 15px;
        }
    }

    .title-one {
        text-align: center;
        z-index: 99;
        position: relative;
        font-size: 33px;
        font-weight: normal;
        color: #fff;
        height: 70px;
        width: 100%;
        top: 8px;
        letter-spacing: 2px;
    }

    .top-img {
        position: absolute;
        z-index: 99;
        left: 13.6%;
        width: 1400px;
        height: 66px;
        opacity: 0.5;
    }

    .copyright {
        z-index: 99;
        position: absolute;
        bottom: 10px;
        left: 645px;
        color: #fff;
        font-style: italic;
        opacity: 0.8;
    }

    .date {
        position: absolute;
        height: 30px;
        color: #fff;
        font-size: 25px;
        z-index: 99;
        left: 43.6%;
        top: 93px;
        text-align: center;
    }

    .change-button {
        position: absolute;
        height: 50px;
        color: #fff;
        font-size: 22px;
        z-index: 100;
        left: 37.2%;
        top: 155px;
        text-align: center;

        .change-item {
            display: inline-block;
            width: 140px;
            height: 50px;
            line-height: 48px;
            border: 1px solid #ffc0ff;
            margin-right: 32px;
            border-radius: 10px;
            box-shadow: 1px 1px 1px 1px rgb(255, 128, 255, 0.4);
            cursor: pointer;
        }

        .isActive {
            font-weight: 600;
            background: rgba(51, 102, 255, 0.2);
        }
    }

    .middle-bottom-chart {
        width: 40%;
        height: 320px;
        z-index: 99;
        position: absolute;
        bottom: 40px;
        left: 30.2%;
    }

    .ygt-container {
        width: 40%;
        height: 550px;
        z-index: 99;
        position: absolute;
        top: 180px;
        left: 30.2%;
    }

    .amap-marker-label {
        background-color: transparent;
        font-size: 20px;
        font-weight: bold;
        color: #fff;
        border: none;

        .info {
            height: 25px;
        }
    }
}
</style>
